<!DOCTYPE HTML>
<html>

<head>
	<meta charset="utf-8">
	<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
	<meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
	<title>统战成员学习平台</title>
	<link rel="stylesheet" type="text/css" href="../../css/base.css" />
	<style>
		.main p {
			text-align: center;
			line-height: 320px;
			color: #aaa;
			font-size: 30px;
		}

		.main span {
			display: block;
			width: 90%;
			margin: auto;
			text-align: center;
			line-height: 40px;
			background: -webkit-linear-gradient(80deg, #48C2F9, #57C7F9);
			color: #fff;
			border-radius: 3px;
			margin-bottom: 15px;
			font-size: 14px;
		}

		.main .hover {
			background: -webkit-linear-gradient(80deg, #62CCFB, #75D0F9);
		}
	</style>
</head>

<body class="white">
	<header class="white red">
		<div class="ui_border_b">
			<span tapmode onclick="api.closeWin()" class="left"><i class="icon_back_white"></i></span>
			<p>修改头像</p>
		</div>
	</header>
	<div class="main">
		<p>上传新头像</p>
		<span tapmode="hover" onclick="fnOpen()">打开相册</span>
		<span tapmode="hover" onclick="fnSave()">保存</span>
		<span tapmode="hover" onclick="fnReset()">重置</span>
	</div>
</body>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="../../script/vue.min.js"></script>
<script type="text/javascript" src="../../script/common.js"></script>
<script type="text/javascript" src="../../script/layer_mobile/layer.js"></script>
<script type="text/javascript">
	var FNImageClip, flag = false;
	apiready = function() {
		api.parseTapmode();
		var header = $api.dom('header');
		$api.fixStatusBar(header);
		sbsm.opened();
		FNImageClip = api.require('FNImageClip');
	};

	function fnOpen() {
		api.getPicture({
			sourceType: 'album',
			encodingType: 'jpg',
			mediaValue: 'pic',
			destinationType: 'url',
			allowEdit: false,
			quality: 100,
			targetWidth: 500,
			saveToPhotoAlbum: false
		}, function(ret, err) {
			if (!ret || !ret.data) {
				return;
			}
			FNImageClip.close();
			FNImageClip.open({
				rect: {
					x: 0,
					y: document.querySelector('header').offsetHeight,
					w: api.winWidth,
					h: 300
				},
				srcPath: ret.data,
				style: {
					mask: '#fff',
					clip: {
						w: 200,
						h: 200,
						x: (api.winWidth - 200) / 2,
						y: 50,
						borderColor: '#0f0',
						borderWidth: 1,
						appearance: 'rectangle'
					}
				},
				mode: 'image'
			}, function(ret, err) {
				flag = true;
			});
		});
	}

	function fnSave() {
		if (!flag) {
			msgUtil.toast({
				msg: '请选择照片'
			});
			return;
		}
		api.showProgress({
			title: '正在上传...',
			text: ''
		});
		FNImageClip.save({
			destPath: 'fs://image/pic1.png',
			copyToAlbum: false,
			quality: 1
		}, function(ret, err) {
			var data = {};
			var userInfo = $api.getStorage(_.USERINFO);
			if (userInfo) {
				data.userId = userInfo.usrId;
				data.time = Date.now();
				data.encodeToken = MD5(data.time + userInfo.mobileToken + userInfo.mobileVerifyKey);
				data.requestType = 'partyconstruction_app';
			}
			api.ajax({
				url: basePath + '/client/user/updateUserImg',
				method: 'post',
				data: {
					values: data,
					files: {
						file: 'fs://image/pic1.png'
					}
				}
			}, function(ret, err) {
				api.hideProgress();
				if (ret.code == 200) {
					msgUtil.toast({
						msg: '头像修改成功'
					});
					userInfo.usrImg = ret.data + '?t=' + Date.now();
					$api.setStorage(_.USERINFO, userInfo);
					// 更新用户信息
					api.sendEvent({
						name: 'refresh_userInfo_event'
					});
					setTimeout(function(){closeWin();},1000)

				} else {
					msgUtil.toast({
						msg: '头像修改失败'
					});
				}
			});
		});
	}

	function fnReset() {
		if (!flag) {
			msgUtil.toast({
				msg: '请选择照片'
			});
			return;
		}
		FNImageClip.reset();
	}
</script>

</html>
